<template>
  <div style="position: relative">
    <div class="tips">请在此处签名</div>
    <VueSignaturePad
      :key="options.penColor"
      width="500px"
      height="500px"
      ref="signaturePad"
      :options="options"
    />
    <div>
      <button @click="changeColor">changeColor</button>
      <button @click="handleNavigate">跳转</button>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      options: {
        penColor: 'rgb(0, 0, 0)',
        minWidth: 5,
        onBegin: () => {
          console.log('onBegin')
        }
      }
    }
  },
  methods: {
    ...mapMutations(['setSignImg']),
    changeColor () {
      this.options.penColor = this.options.penColor === 'rgb(0, 0, 0)' ? 'rgb(255, 0, 0)' : 'rgb(0, 0, 0)'
    },
    handleNavigate () {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
      if (!isEmpty) {
        this.setSignImg(data)
        this.$router.push('/pdf')
      }
    }
  }
}

</script>

<style scoped>
.tips {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
